<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.css">
        <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"> -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.bundle.min.js"></script>
        <style>
        
            .box{
                width: 900px;
                /* 如果宽度不够的时候，那么子元素的盒子就会自动收缩，这就是当父级元素变成伸缩盒子的时候，子元素变成伸缩项的体现 */
                height: 500px;
                border: 1px solid #ff6700;
                /* dsiplay:flex;就是把父级元素或者说父级容器变成一个伸缩盒子,那么会自动让子元素变成一个伸缩项 */
                display: flex;

                /* justify-content 作用就是设置子元素盒子的（主轴）排列方式，有三个值：
                    1.flex-start 就是从左往右排列，也叫做左对齐，同时这也是默认值
                    2.center 就是中心对齐排列
                    3.flex-end 就是右对齐
                    另外还有两个值：
                    1.space-around 就是每个子元素都会有同等宽度的左右边距，这样也导致了子元素和子元素之间的间距是两端子元素的间距的两倍
                    2.space-between 就是每个子元素之间的间隙是相同的，但是两端子元素的边距没有了
                 */
                justify-content:space-around;

                /*  当你遇到子元素的总宽度大于父元素的宽度的时导致子元素收缩的时候，如果你不想子元素收缩，而是让子元素换行
                    flex-flow 就是来干这个事儿的
                    flex-flow 实际上就是 flex-wrap 和 flex-direction 组成的
                    flex-wrap:就是控制子元素是否换行的，有两个值
                    flex-wrap:
                        1.nowrap(不换行)  2.warp(换行) 默认就是不换行的，即默认就是nowrap 
                        3.wrap-reverse ，reverse是翻转的意思，因此 wrap-reverse 就是换行加翻转的效果
                    
                    flex-direction 就是用来设置主轴的排列方向的，有水平方向和垂直方向
                    1.row 默认值，就是默认是水平方向的，也就是从左到右的方向
                    2.column 就是垂直方向，也就是从上到下的方向
                    3.row-reverse 看到reverse就知道，原本水平方向是从左到右的方向，但是加了reverse之后，就是从右到左的方向
                    4.column-reverse 不用想，原本垂直方向是从上到下的方向，但是加了reverse之后就是从下到上的方向
                 */
                 flex-wrap:wrap;

                 flex-direction: column-reverse;
            }
            .first{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .second{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            .third{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            .fourth{
                width: 200px;
                height: 200px;
                background-color: greenyellow;
            }
            .fifth{
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        
        </style>
    </head>
    <body>
        <div class="box">
            <div class="first">1</div>
            <div class="second">2</div>
            <div class="third">3</div>
            <div class="fourth">4</div>
            <div class="fifth">5</div>
        </div>
    </body>
</html>